<template>
  <div class="box">
    <div class="main">
      <div class="mb20">
        <img src="@/assets/images/custonTest.png" alt="" />
      </div>
      <el-card>
        <div class="mb25">
          <div class="f20 bold f aic mb15">
            <div class="circle mr10"></div>
            <div>试卷名称</div>
          </div>
          <div class="custom-index" style="width:520px">
            <el-input v-model="formData.testPaperName" placeholder="请输入试卷名称" maxlength="30" show-word-limit/>
          </div>
        </div>
        <div class="mb20">
          <div class="f20 bold f aic mb15">
            <div class="circle mr10"></div>
            <div>试题来源</div>
          </div>
          <div>
            <el-radio-group v-model="formData.source">
              <el-radio value="random" size="large">不限</el-radio>
              <el-radio value="errorQuestion" size="large">错题记录</el-radio>
              <el-radio value="noHistoryPaper" size="large">未做过的题</el-radio>

            </el-radio-group>
<!--            <el-button color="#3377FF" @click="dialogVisible = true;formData.source='errorQuestion'">错题记录</el-button>-->
<!--            <el-button color="#3377FF" @click="formData.source='noHistoryPaper'">未做过的题</el-button>-->
<!--            <el-button color="#3377FF" @click="formData.source='random'">不限</el-button>-->
          </div>
        </div>

        <div class="mb20">
          <div class="f20 bold f aic mb15">
            <div class="circle mr10"></div>
            <div>试题难易程度</div>
          </div>
          <div>
            <el-radio-group v-model="formData.dfLevel">
              <el-radio :value="1" size="large">简单</el-radio>
              <el-radio :value="2" size="large">中等</el-radio>
              <el-radio :value="3" size="large">困难</el-radio>

            </el-radio-group>
            <!--            <el-button color="#3377FF" @click="dialogVisible = true;formData.source='errorQuestion'">错题记录</el-button>-->
            <!--            <el-button color="#3377FF" @click="formData.source='noHistoryPaper'">未做过的题</el-button>-->
            <!--            <el-button color="#3377FF" @click="formData.source='random'">不限</el-button>-->
          </div>
        </div>
        <div class="mb20">
          <div class="f20 bold f aic mb15">
            <div class="circle mr10"></div>
            <div>答题时间</div>
          </div>
          <div>
            <el-input
              v-model="formData.answeringTime"
              style="width: 580px"
              placeholder="最大不超过180分钟"
            >
              <template #append>分钟</template>
            </el-input>
          </div>
        </div>
        <div class="mb20">
          <div class="f20 bold f aic mb15">
            <div class="circle mr10"></div>
            <div>请选择题型与题量</div>
          </div>
          <div>
            <div class="mb10">
              <el-radio-group v-model="formData.type">
                <el-radio value="1" size="large">自定义题型和题量</el-radio>
                <el-radio value="2" size="large">自定义题量</el-radio>
                <el-radio value="random" size="large">随机不限</el-radio>
              </el-radio-group>
            </div>
            <div v-if="formData.type=='1'">
              <div class="f aic mb20">
                <div>
                  <span class="mr10">单选题</span>
                  <el-input-number  controls-position="right"  :min="0"   :step="1"
                    v-model="formData.danXuanScore"
                    style="width: 200px"
                    placeholder="数量"
                  >
                    <template #append>道题</template>
                  </el-input-number>
                </div>
                <div class="ml30">
                  <span class="mr10">多选题</span>
                  <el-input-number  controls-position="right"  :min="0"   :step="1"
                    v-model="formData.duoXuanScore"
                    style="width: 200px"
                    placeholder="数量"
                  >
                    <template #append>道题</template>
                  </el-input-number>
                </div>
              </div>
              <div class="f aic">
                <div>
                  <span class="mr10">判断题</span>
                  <el-input-number  controls-position="right"  :min="0"   :step="1"
                    v-model="formData.panDuanScore"
                    style="width: 200px"
                    placeholder="数量"
                  >
                    <template #append>道题</template>
                  </el-input-number>
                </div>
<!--                <div class="ml30">-->
<!--                  <span class="mr10">简答题</span>-->
<!--                  <el-input-->
<!--                    v-model="formData.date"-->
<!--                    style="width: 200px"-->
<!--                    placeholder="数量"-->
<!--                  >-->
<!--                    <template #append>道题</template>-->
<!--                  </el-input>-->
<!--                </div>-->
              </div>
            </div>

            <div v-if="formData.type=='2'">
              <div class="f aic mb20">
                <div>
                  <span class="mr10">题量</span>
                  <el-input-number  controls-position="right"  :min="0"   :step="1"
                      v-model="formData.paperNum"
                      style="width: 300px"
                      placeholder="请输入题目数量"
                  >
                    <template #append>道题</template>
                  </el-input-number>
                </div>

              </div>

            </div>
          </div>
        </div>
      </el-card>
      <div class="text-center mt40">
        <el-button
          type="danger"
          round
          color="#f01414"
          @click="goPath('/customTest')"
          >取消</el-button
        >
        <el-button type="primary" round color="#3377FF" @click="submitData"
          >保存</el-button
        >
      </div>
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="错题记录"
        width="40%"
        :before-close="handleClose"
    >
     <div class="dialog-content">
       <el-table
           ref="multipleTableRef"
           :data="tableData"
           style="width: 100%"
           @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" />
         <el-table-column label="Date" width="120">
           <template #default="scope">{{ scope.row.date }}</template>
         </el-table-column>
         <el-table-column property="name" label="Name" width="120" />
         <el-table-column property="address" label="Address" show-overflow-tooltip />
       </el-table>
     </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/store/modules/counter.ts";
import { useRouter } from "vue-router";
import { ref } from 'vue'
import {generateTestPaper} from "@/api/custom/custom";


const counterStore = useCounterStore();
const route = useRouter();
const formData = ref({
  testPaperName:"",
  "answeringTime": 0,
  "danXuanScore": 0,
  "duoXuanScore": 0,
  "panDuanScore": 0,
   dfLevel:1,
   paperNum:0,
  "source": 'random',
  "type": '1'
});

function submitData(){
  let params = {...formData.value}
  if(params.type!='random'){
    params.type = '';
  }
  if(params.danXuanScore==''||params.danXuanScore==null){
    params.danXuanScore = 0;
  }
  if(params.duoXuanScore==''||params.duoXuanScore==null){
    params.duoXuanScore = 0;
  }
  if(params.panDuanScore==''||params.panDuanScore==null){
    params.panDuanScore = 0;
  }
  if(params.paperNum==''||params.paperNum==null){
    params.paperNum = 0;
  }

  if(params.testPaperName==""||params.testPaperName==null){
    ElMessage.error('请输入试卷名称')
    return
  }else if(params.answeringTime==""||params.answeringTime==null||params.answeringTime==0){
    ElMessage.error('请输入答题时间')
    return
  }
  generateTestPaper(params).then(res=>{
    if(res.code==200){
      route.push('/customTest')
    }else {
      ElMessage.error(res.msg)
    }
    console.log(res)
  })
}
const dialogVisible = ref(false)

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const save = () => {
  goPath("/customTest");
};

const goPath = (path) => {
  route.push(path);
};
</script>

<style lang="scss" scoped>
.box {
  background: #fff;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 100px 0 20px;
  min-height: calc(100vh - 140px);
  .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f01414;
  }
}
:deep(.el-button) {
  width: 100px;
  height: 32px;
  line-height: 32px;
}

//.custom-index :deep(.el-input__wrapper) {
//  padding: 0 25px;
//}
//:deep(.el-input__wrapper) {
//  background: #f9fbfa;
//  box-shadow: none;
//  font-size: 16px;
//  height: 45px;
//}
:deep(.el-input-group__append) {
  background: #f9fbfa;
  box-shadow: none;
  color: #393b3c;
  font-size: 18px;
}
:deep(.el-radio__label) {
  color: #919293;
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
  background: #3377ff;
  border-color: #3377ff;
}
:deep(.el-radio__label) {
  color: #3377ff;
}
:deep(.el-radio__inner::after) {
  width: 0;
}
</style>
